<template>
    <div class="big-data-container">
        <dv-full-screen-container>
            <div class="big-data-main-container">
                <top-title></top-title>
                <div class="big-data-bottom-container">
                    <div class="left-chart">
                        <left-chart1></left-chart1>
                        <left-chart2></left-chart2>
                        <left-chart3></left-chart3>
                    </div>
                    <div class="right-chart">
                        <right-chart1></right-chart1>
                        <right-chart2></right-chart2>
                    </div>
                    <center-chart></center-chart>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<script>
import TopTitle from './topTitle'
import LeftChart1 from './leftChart1'
import LeftChart2 from './leftChart2'
import LeftChart3 from './leftChart3'
import RightChart1 from './rightChart1'
import RightChart2 from './rightChart2'
import CenterChart from './centerChart'
export default {
    components: {CenterChart, RightChart2, RightChart1, LeftChart3, LeftChart2, LeftChart1, TopTitle},
    data(){
        return{

        }
    },
    methods:{

    },
    mounted () {
    }
}
</script>

<style scoped lang="scss">

.big-data-container{
    width: 100%;
    height: 100%;
}
.big-data-main-container{
    width: 100%;
    height: 100%;
    background: url("/static/img/main_bg.png") no-repeat;
    display: flex;
    flex-direction: column;
    z-index: 0;
}

.big-data-bottom-container{
    width: 100%;
    height: 100%;
    position: relative;

    .left-chart{
        position: absolute;
        left: 0;
        height: 100%;
        z-index: 1;
    }

    .right-chart{
        position: absolute;
        right: 0;
        height: 100%;
        z-index: 1;
    }

}
</style>
